<template>
  <el-card>
    <el-form
      :model="addData"
      ref="addFrom"
      label-width="100px"
      class="demo-ruleForm"
      :rules="rules"
    >
      <!-- 表单效验进行关联 这里加错位置报错了-->
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="addData.type">
          <el-radio :label="1">目录</el-radio>
          <el-radio :label="2">菜单</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上级" prop="pid" v-if="addData.type === 2">
        <el-select v-model="addData.pid" placeholder="请选择">
          <!--:value="0"处理掉设置pid后input显示0 的问题
            逻辑是使  label="请选择" 和:value="0"相关联解决此问题-->
          <el-option label="请选择" :value="0"></el-option>
          <el-option
            v-for="item in menuList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="title">
        <el-input
          v-model="addData.title"
          placeholder="请输入菜单名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="图标" v-if="addData.type === 1" prop="icon">
        <el-input
          v-model="addData.icon"
          placeholder="请输入菜单图标"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="地址"
        prop="url"
        v-if="addData.type === 2"
        placeholder="请输入菜单名称"
      >
        <el-input v-model="addData.url" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="addData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('addFrom')"
          >提交</el-button
        >
        <el-button @click="resetForm('addFrom')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// 按需导入    代码复用 ，里面封装了一个axios
import { getMenuList ,getMenuById } from "../../request/menu";
export default {
  data() {
    return {
      menuList: [],
      // 数据模型，在跟标签上也有  似乎是用于一一对应的关系
      addData: {
        //   注意这里不是router
        id:'',
        pid: 0, //父级ID
        // 在添加时，pid如果是一个空字符串，那么就是加不上的
        type: 2, //菜单类型
        title: "", //菜单名称
        icon: "", //图标
        url: "", //菜单地址
        status: 1, //状态
      },
      rules: {
        //   表单效验这里写完之后还要在跟标签用rules进行关联
        pid: { required: true, message: "请选择" },
        type: { required: true, message: "请选择" },
        title: { required: true, message: "请输入" },
        icon: { required: true, message: "请输入" },
        url: { required: true, message: "请输入" },
        status: { required: true, message: "请输入" },
      },
    };
  },
  //   数据一家在你就要响应
  created() {
      this.id=this.$route.params.id;
    getMenuList().then((res) => {
      //    console.log(res)
      if (res) {
        // 这是更新数据？？
        this.menuList = res;
      }
    });
    getMenuById(this.id).then(res=>{
        // 如果拿到了  就。。。赋值
        if(res){
            this.addData=res
        }
    })
  },
  // 表单提交
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            // 第一个参是数据接口的位置      解构赋值，直接在路由对象上拿
          this.$http.post("/api/menuedit", {...this.addData,id:this.$route.params.id}).then((res) => {
            if (res.code == 200) {
              // 添加成功后还给用户成功提示并重定向
              this.$success("修改成功");
              this.$router.push("/menu");
            } else {
              this.$error("很抱歉，添加失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 600px;
  margin: 0 auto;
}
</style>